<script setup lang="ts">
//TO-DO
//1.防火墙关系展示
import {getAssetInfo} from "@/api/asset";
import {reactive, ref} from "vue";

interface Param {
    id: String,
    ip: String
}

const queryParam = reactive<Param>({
    id: "",
    ip: ""
})
const data = reactive({
    result: {
        "asset_type": "",
        "firewall_policies": [],
        "id": "",
        "ip": "",
        "name": "",
        "os": "",
        "services": [],
        "vulnerabilities": [],
        "web_infos": []
    },
    port: "",
    B: "",
    C: ""
})
onMounted(async () => {
    const param = getQueryParam();
    queryParam.ip = param.ip
    queryParam.id = param.id
    const response = await getAssetInfo({'id': queryParam.id})
    data.result = response.data
    const ports = []
    data.result.services.forEach((item) => {
        ports.push(item.port);
    })
    data.result.web_infos.forEach((item) => {
        ports.push(item.port)
    })
    const noRepeat = [...new Set(ports)]
    data.port = noRepeat.toString()
    const ip = data.result.ip
    let index = ip.indexOf(".");
    index = ip.indexOf(".", index + 1)
    data.B = ip.substring(0, index) + ".0.0";
    index = ip.lastIndexOf(".");
    data.C = ip.substring(0, index) + ".0";
    console.log(data.result)
})
</script>

<template>
    <div style="margin-left: 2%;margin-top: 1%">
        <span style="font-size: 150%">{{ queryParam.ip }}</span>
    </div>
    <el-row :gutter="20" style="margin-top: 2%;margin-left:1%;width: 90%">
        <el-col :span="12">
            <el-scrollbar height="300px">
                <el-descriptions border :column="1" style="height: 290px">
                    <el-descriptions-item label="资产类型" label-align="center">
                        <div class="content">{{ data.result.asset_type }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="操作系统" label-align="center" min-width="100px">
                        <div class="content">{{ data.result.os }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="host" label-align="center">
                        <div class="content">{{ data.result.name }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="开放端口" label-align="center">
                        <div class="content">{{ data.port }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="B段" label-align="center">
                        <div class="content">{{ data.B }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="C段" label-align="center">
                        <div class="content">{{ data.C }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-scrollbar>
        </el-col>
        <el-col :span="12">
            <el-scrollbar height="300px">
                <el-card shadow="never" header="服务" style="height: 290px">
                    <p v-for="item in data.result.services" :key="item" class="scrollbar-demo-item">
                        {{ item.name}}
                    </p>
                </el-card>
            </el-scrollbar>
        </el-col>
    </el-row>
    <el-table :data="data.result.web_infos" height="250" style="width: 89%;margin-left: 1.6%;margin-top:1%"
        border stripe
    >
        <el-table-column prop="uri" label="URI" align="center"/>
        <el-table-column prop="title" label="标题" align="center"/>
        <el-table-column prop="code" label="返回码" align="center"/>
        <el-table-column prop="protocol" label="协议" align="center"/>
        <el-table-column prop="port" label="端口" align="center"/>
    </el-table>
    <el-table :data="data.result.vulnerabilities" height="300" style="width: 89%;margin-left: 1.6%;margin-top: 1%">
        <el-table-column label="CVE编号">
            <template #default="scope">
                <div style="display: flex;align-items: center">
                    <el-text type="danger">{{scope.row.cve_id}}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="风险等级">
            <template #default="scope">
                <el-tag v-if="scope.row.risk_level==='CRITICAL'" color="#8B0000" effect="light">严重</el-tag>
                <el-tag v-else-if="scope.row.risk_level==='HIGH'" color="#FF0000" effect="light">高风险</el-tag>
                <el-tag v-else-if="scope.row.risk_level==='MEDIUM'" color="#FFA500" effect="light">中风险</el-tag>
                <el-tag v-else-if="scope.row.risk_level==='LOW'" color="#008080" effect="light">低风险</el-tag>
            </template>
        </el-table-column>
    </el-table>

</template>

<style scoped>
.content {
    word-wrap: break-word;
}
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>